<template>
	<div class="message-record">
		<div v-if="!messageList.length" class="message-empty">
			<div class="message-empty-img"></div>
			<div class="message-empty-text">No message</div>
		</div>
		<div
			v-else
			v-for="(item, index) in messageList"
			:key="index"
			class="message-record-item"
			@click="showDetail(item)"
		>
			<div class="header">
				<div class="time">{{ formatTime(item.createTime) }}</div>
			</div>
			<div class="main">
				<div class="title">
					{{ item.title
					}}<span v-if="!item.readed" class="point"></span>
				</div>
				<div class="content">{{ filtersText(item.description) }}</div>
			</div>
		</div>
	</div>
</template>
<script>
import { inject, onMounted, reactive, toRefs } from "vue";
import { useMessage } from "./component/useMessage.js";
export default {
	setup(props) {
		const state = reactive({});
		const vueState = inject("vueState");
		const { showDetail, messageList, formatTime, filtersText } =
			useMessage();
		// onMounted(()=>{
		//     console.log('record-mounted',messageList,vueState.pageInfo);
		// })
		return {
			...toRefs(state),
			showDetail,
			messageList,
			vueState,
			formatTime,
			filtersText,
		};
	},
};
</script>
<style lang="less" scoped>
.message-record {
	height: 100%;
	background-color: #f5f6f9;
	padding: 0.16rem;
	overflow-y: auto;
	position: relative;
	.message-empty {
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		top: 40%;
		&-img {
			height: 2rem;
			width: 2rem;
			background: url(../../../assets/images/no_message.png) no-repeat
				center;
			background-size: contain;
		}
		&-text {
			margin-top: 0.04rem;
			font-size: 0.14rem;
			font-weight: 400;
			color: #9c9da6;
			line-height: 0.24rem;
			text-align: center;
		}
	}
	&-item {
		margin-top: 0.2rem;
		&:first-child {
			margin-top: 0;
		}
		.header {
			display: flex;
			align-items: center;
			justify-content: center;
			.time {
				padding: 0.02rem 0.12rem;
				font-size: 0.12rem;
				font-weight: 400;
				line-height: 0.2rem;
				color: rgba(20, 20, 43, 0.32);
				background-color: rgba(20, 20, 43, 0.04);
				border-radius: 0.24rem;
			}
		}
		.main {
			background-color: white;
			border-radius: 0.12rem;
			padding: 0.1rem 0.16rem 0.12rem;
			margin-top: 0.08rem;
			.title {
				font-size: 0.16rem;
				font-weight: 500;
				line-height: 0.28rem;
				color: black;
				.point {
					.unique-point();
				}
			}
			.content {
				font-size: 0.12rem;
				font-weight: 400;
				color: #9c9da6;
				line-height: 0.2rem;
				.lines-ellipsis-2();
			}
		}
	}
}
</style>